<template>
  <div class="my">
    <a-card :bordered="false" style="border-radius:8px">
      <div class="flex row_bet">
        <div class="card_title">
          个人业绩
        </div>
        <a-range-picker
          :ranges="{
            本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
            上周: [
              moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
              moment().subtract(parseInt(moment().format('d')), 'days')
            ],
            本月: [
              moment()
                .month(moment().month())
                .startOf('month'),
              moment()
                .month(moment().month())
                .endOf('month')
            ],
            上月: [
              moment(
                moment()
                  .subtract(1, 'month')
                  .format('YYYY-MM') + '-01'
              ),
              moment(
                moment()
                  .subtract(1, 'month')
                  .format('YYYY-MM') + '-01'
              )
                .subtract(-1, 'month')
                .add(-1, 'days')
            ],
            半年: [
              moment()
                .startOf('day')
                .subtract(6, 'month'),
              moment()
            ]
          }"
          format="YYYY/MM/DD"
          @change="severChange"
          style="width:250px"
        >
          <div>
            <a-icon type="calendar" /><span class="m_l_10 m_r_10">{{ severstr }}</span>
            <a-icon type="down" style="font-size:12px" />
          </div>
        </a-range-picker>
      </div>
      <div class="header_box">
        <div class="header-info">
          <div class="title">总支付金额</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="2"
              :endVal="service.alipayAmt == null ? 0 : parseFloat(service.alipayAmt)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">总预估服务费</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="2"
              :endVal="service.preServiceFee == null ? 0 : parseFloat(service.preServiceFee)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">总结算服务费</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="2"
              :endVal="service.cmServiceFee == null ? 0 : parseFloat(service.cmServiceFee)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">公用活动预估服务费</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="2"
              :endVal="service.pubPreFee == null ? 0 : parseFloat(service.pubPreFee)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">公用活动结算服务费</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="2"
              :endVal="service.pubCmFee == null ? 0 : parseFloat(service.pubCmFee)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

        <div class="header-info">
          <div class="title">公用活动支付金额</div>
          <div class="datainfo">
            <countTo
              :startVal="startVal"
              :decimals="2"
              :endVal="service.pubPreAmt == null ? 0 : parseFloat(service.pubPreAmt)"
              :duration="3000"
            >
            </countTo>
          </div>
        </div>

      </div>

      <div class="mainbox">
        <a-row type="flex" justify="space-between" :gutter="[12, 13]">
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div>
              <a-table :columns="columns" :data-source="allData" :rowKey="allData => allData.addDate" :bordered="false" :pagination="false">
                <template slot="title">
                  <div class="table_title">所有活动业绩详情</div>
                </template>
              </a-table>
            </div>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div>
              <a-table :columns="columns2" :data-source="publicData" :rowKey="publicData => allData.addDate" :bordered="false" :pagination="false">
                <template slot="title">
                  <div class="table_title">公用活动业绩详情
                  </div>
                </template>
              </a-table>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>
<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getachievement } from '@/api/achievementApi'
  export default {
    name: 'My',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        startVal: 0,
        publicData: [
          // {
          //   addDate: '2020-11-15', // 日期
          //   pubPreAmt: '0.00', // 公用支付金额
          //   pubPreFee: '0.00', // 公用预估服务费
          //   pubCmFee: '0.00'// 公用结算服务费
          // }
        ],
        allData: [
          // {
          //   addDate: '2020-11-15', // 日期
          //   alipayAmt: '0.00', // 支付金额
          //   preServiceFee: '0.00', // 预估服务费
          //   cmServiceFee: '0.00'// 结算服务费
          // }
        ],
        columns: [
          {
            title: '日期',
            align: 'center',
            dataIndex: 'addDate',
            scopedSlots: { customRender: 'addDate' }
          },
          {
            title: '支付金额',
            align: 'center',
            dataIndex: 'alipayAmt',
            scopedSlots: { customRender: 'alipayAmt' }
          },
          {
            title: '预估服务费',
            align: 'center',
            dataIndex: 'preServiceFee',
            scopedSlots: { customRender: 'preServiceFee' }
          },
          {
            title: '结算服务费',
            align: 'center',
            dataIndex: 'cmServiceFee',
            scopedSlots: { customRender: 'cmServiceFee' }
          }
        ],
        columns2: [
          {
            title: '日期',
            align: 'center',
            dataIndex: 'addDate',
            scopedSlots: { customRender: 'addDate' }
          },
          {
            title: '支付金额',
            align: 'center',
            dataIndex: 'pubPreAmt',
            scopedSlots: { customRender: 'pubPreAmt' }
          },
          {
            title: '预估服务费',
            align: 'center',
            dataIndex: 'pubPreFee',
            scopedSlots: { customRender: 'pubPreFee' }
          },
          {
            title: '结算服务费',
            align: 'center',
            dataIndex: 'pubCmFee',
            scopedSlots: { customRender: 'pubCmFee' }
          }
        ],
        service: {
          alipayAmt: 0, // 总支付金额
          preServiceFee: 0, // 总预估服务费
          cmServiceFee: 0, // 总结算服务费
          pubPreAmt: 0, // 公用活动总支付金额
          pubPreFee: 0, // 公用活动总预估服务费
          pubCmFee: 0 // 公用活动总结算服务费
        },
        severstr:
          moment()
            .month(moment().month())
            .startOf('month')
            .format('YYYY-MM-DD') +
          ' 至 ' +
          moment().format('YYYY-MM-DD'),
        starttime: moment().month(moment().month()).startOf('month').unix(),
        endtime: moment().month(moment().month()).endOf('month').unix()
      }
    },
    computed: {},
    created () {
      this.getachievement(this.starttime, this.endtime)
    },
    mounted () {

    },
    methods: {
      getachievement (start, end) {
        getachievement({
          start: start,
          end: end
        }).then(res => {
          // console.log('业绩', res)
          if (res.code === 200) {
          this.service = res.data.data
          this.allData = res.data.all
          }
          this.publicData = res.data.public
        }).catch(err => {
          console.log(err)
        })
      },
      severChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.getachievement(dates[0].unix(), dates[1].unix())
        const str = dateStrings[0].format('YYYY-MM-DD') + '至' + dateStrings[1].format('YYYY-MM-DD')
        // str = str.substring(5, 7)
        this.severstr = str
      }
    }
  }
</script>
<style lang='less' scoped>
  .my {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .header_box {
      min-height: 101px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .header-info {
        margin-right: 10px;
        .title {
          color: rgba(16, 16, 16, 0.7);
          font-size: 12px;
        }

        .datainfo {
          font-size: 28px;
          color: #101010;
          font-weight: 600;
        }
      }
    }
    .table_title{
      width: 100%;
      color: #101010;
      font-weight: 600;
      margin:0 auto;
      text-align: center;
    }

    .mainbox{
      /deep/.ant-table-title{
        background-color: #F8F8F9!important;
        border-radius: 8px 8px 0px 0px;
        border-bottom: 2px solid #ffffff;
      }
      /deep/.ant-table-thead > tr > th:first-child {
        border-top-left-radius: 0px!important;
      }
      /deep/.ant-table-thead > tr > th:last-child {
        border-top-right-radius: 0px!important;
      }
      /deep/.ant-table-tbody > tr > td:first-child {
        border-left: 0px solid #ECF2FD !important;
      }
      /deep/.ant-table-tbody > tr > td {
        border-right: 0px!important;
      }
    }
  }
</style>
